<template>
  <div>
    <el-main>
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        :header-cell-style="{ background: '#58B7FF', color: '#ffffff' }"
      >
        <el-table-column prop="sn" label="流水号"> </el-table-column>

        <el-table-column prop="department" label="部门"> </el-table-column>

        <el-table-column prop="post" label="岗位"> </el-table-column>

        <el-table-column prop="num" label="人数"> </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>



<script>
export default {
  data() {
    return {
      spanArr: [], //用于存放每一行记录的合并数
      tableData: [],    
    };
  },
  created() {
    this.getgoal();
  },
  // mounted: function () {
  //   this.getSpanArr(this.tableData);
  // },
  methods: {
    async getgoal() {
      try {
        let res = await this.$axios.get(`api/interview/getgoal`);
        this.tableData = res.data;
      } catch (e) {}

      this.$axios
        .get(`api/interview/getgoal`)
        .then((response) => {
          this.tableData = response.data;
          this.getSpanArr(this.tableData);
        })

        .catch(function (error) {
          console.log(error);
        });
    },

    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].sn === data[i - 1].sn) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
        console.log(this.spanArr);
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(`rowspan:${_row} colspan:${_col}`);
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>